<template>
  <div>
    <div class="page_header">
      <div>
        <a-select v-model="searchStatus" style="width: 220px">
          <a-select-option value="0">全部</a-select-option>  
          <a-select-option value="1">未处理</a-select-option>
          <a-select-option value="2">已处理</a-select-option>
        </a-select>
        <a-input
        placeholder="请输入用户账号"
        v-model="searchText"
        style="width:220px;"
        />
        <a-button type="primary" @click="onSearch" :loading="searchLoading">搜索</a-button>  
      </div>
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="fd_id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="action"  slot-scope="text,record"> 
          <a-button  type="primary" @click="setStetus(record)" :disabled="record.status=='已处理'">{{record.status=='已处理'?'已处理':'去处理'}}</a-button>
      </template>
    </a-table>

    <a-modal title="审核任务" v-model="modalVisible" :width="800" :footer="null">
      <a-row>
        <a-col :xs="24" :sm="24">
          <detail-list size="small" :col="2">
            <detail-list-item term="用户昵称">{{feedItem.nickname}}</detail-list-item>
            <detail-list-item term="用户账号">{{feedItem.phone}}</detail-list-item>
            <detail-list-item term="问题类型">{{feedItem.type}}</detail-list-item>
            <detail-list-item term="问题状态">未处理</detail-list-item>
            <detail-list-item term="问题内容">{{feedItem.content}}</detail-list-item>
          </detail-list>
        </a-col>
      </a-row>
      <a-divider style="margin-bottom: 32px"/>
       <a-row>
        <a-col :xs="12" :sm="12">
          <a-card hoverable style="width: 240px">
            <img
              alt="example"
              :src="feedItem.image||defaultImg"
              slot="cover"
            />
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="12">
          <div> <span style="color:red;">*</span> 反馈内容:</div>
          <div style="margin-bottom:100px;margin-top:10px;">
            <a-textarea v-model="remark" placeholder="必填" style="resize:none; height:160px;"  maxlength="80"/>
          </div>
          <div style="text-align: center;">
            <a-button @click="setBack" type="primary" style="margin-left: 50px;">确认反馈</a-button>
          </div>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { feedList, setfeedback } from '@/api/getData'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'Feedbacklist',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
        // 表头
        columns: [
            {
            title: '序号',
            dataIndex: 'fd_id'
            },
            {
            title: '用户昵称',
            dataIndex: 'nickname'
            },
            {
            title: '用户账号',
            dataIndex: 'phone'
            },
            {
            title: '问题类型',
            dataIndex: 'type'
            },
            {
            title: '问题内容',
            dataIndex: 'content'
            },
            {
            title: '问题状态',
            dataIndex: 'status'
            },
            {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        modalVisible: false,
        searchText: '',
        searchStatus: '0',
        feedItem: {},
        defaultImg: require('../../assets/task_detail_default.png'),
        remark: ''
    }
  },
  mounted () {
    
    this.queryTaskList()
  },
  methods: {
    setStetus(record){
        if(record.status=='未处理'){
            this.feedItem = record
            this.modalVisible = true
            // setfeedback(record.fd_id).then(res=>{
            //     console.log(res)
            //     this.queryTaskList()
            // })
        }
    },
    setBack(){
       this.modalVisible = false
      setfeedback(this.feedItem.fd_id,this.remark).then(res=>{
          console.log(res)
          this.queryTaskList()
      })
    },  
    queryTaskList(){
        this.tableLoding = true
        feedList(this.pagination.current,this.pagination.pageSize,this.searchText,this.searchStatus).then(res=>{
            console.log(res)
            this.list = res.data.list
            this.pagination.total = res.data.total
        }).finally(e=>{
            this.tableLoding = false
            this.searchLoading = false
            this.searchText = ''
            this.searchStatus = '0'
        })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryTaskList()
    },
    onSearch(){
      this.searchLoading = true
      this.queryTaskList()
    },
    setSearchStatus(value){
      this.searchStatus = value
    }
  }
}
</script>

<style scoped>
.page_header{
    margin-bottom:20px; 
    display:flex;
}
</style>
